<template>
  <a-popover
    :visible="visible"
    :trigger="myTrigger"
    :placement="placement"
    v-bind="$attrs"
    v-on="$listeners"
    @visibleChange="onVisibleChange">
    <slot/>
    <div slot="content" style="width: 378px;">
      <div class="choose-color">
        <template v-for="color of backColorList">
          <low-app-icon
            :title="color.name"
            :class="{'active':color.value === value.iconBackColor}"
            :type="color.value === value.iconBackColor ? 'check':''"
            :backColor="color.value"
            size="small"
            theme="outlined"
            @click="onChangeColor(color.value)"/>
        </template>
      </div>
      <div class="choose-icon">
        <template v-for="iconType of appIconTypeList">
          <low-app-icon
            :title="iconType"
            :class="{'active':iconType === value.iconType}"
            :type="iconType"
            :backColor="value.iconBackColor"
            size="small"
            @click="onChangeType(iconType)"/>
        </template>
      </div>
    </div>
  </a-popover>
</template>

<script>
import LowAppIcon from './LowAppIcon'
import { appIconTypeList } from '../constant/LowAppConst'
import { randomNumber } from '@/utils/util'

export default {
  // 选择/修改应用图标组件
  name: 'LowAppIconChoose',
  components: {LowAppIcon},
  props: {
    value: Object,
    // 'manual' = 手动控制显隐，'semi-auto' = 半自动
    trigger: {
      type: String,
      default: 'click',
    },
    placement: {
      type: String,
      default: 'right',
    },
  },
  data() {
    return {
      visible: false,
      appIconTypeList: appIconTypeList,
      backColorList: [
        {value: '0', name: '矢车菊蓝'},
        {value: '1', name: '极客蓝'},
        {value: '2', name: '明青'},
        {value: '3', name: '极光绿'},
        {value: '4', name: '日暮'},
        {value: '5', name: '火山'},
        {value: '6', name: '薄暮'},
        {value: '7', name: '酱紫'},
      ]
    }
  },
  computed: {
    myTrigger() {
      if (this.trigger === 'manual' || this.trigger === 'semi-auto') {
        return 'click'
      }
      return this.trigger
    },
  },
  methods: {
    show() {
      this.visible = true
      this.$emit('visibleChange', this.visible)
    },
    hide() {
      this.visible = false
      this.$emit('visibleChange', this.visible)
    },
    // 随机icon
    randomIcon() {
      let value = {
        iconType: appIconTypeList[randomNumber(0, appIconTypeList.length - 1)],
        iconBackColor: randomNumber(0, 7).toString()
      }
      this.onChange(value.iconType, value.iconBackColor)
      return value
    },
    onChangeColor(backColor) {
      this.onChange(null, backColor)
    },
    onChangeType(iconType) {
      this.onChange(iconType, null)
    },
    onChange(iconType, iconBackColor = this.value.iconBackColor) {
      if (!iconType) {
        iconType = this.value.iconType
      }
      if (!iconBackColor) {
        iconBackColor = this.value.iconBackColor
      }
      this.$emit('change', {iconType, iconBackColor})
    },
    onVisibleChange(visible) {
      if (this.trigger === 'manual') {
        return
      }
      if (visible && this.trigger === 'semi-auto') {
        return
      }
      this.visible = visible
    },
  },
}
</script>

<style lang="less" scoped>
.choose-color {
  .app-item-icon {
    border-radius: 20px;
  }
}

.choose-icon,
.choose-color {
  .app-item-icon {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.3s;

    &:nth-of-type(8n+0) {
      margin-right: 0;
    }

    &:hover {
      opacity: 0.8;
      box-shadow: 0 0 4px 1px #90a0b0;
    }

    &.active {
      opacity: 0.6;
      box-shadow: 0 0 4px 1px #708090;
    }
  }
}
</style>